<template>
  <!--  ref='vantaRef1'-->
  <div ref='vantaRef1'>
    <div class="container">

      <el-steps :active="active" simple style="background-color:#182052;height: 50px">
        <el-step title="模式选择" icon="el-icon-edit"></el-step>
        <el-step title="选择操作机器人" icon="el-icon-upload"></el-step>
        <!--      <el-step title="输入子任务数" icon="el-icon-picture"></el-step>-->
        <el-step title="评估结果输入" icon="el-icon-picture"></el-step>
        <el-step title="分配结果" icon="el-icon-picture"></el-step>
      </el-steps>
      <div v-show="active===1" class="content4">
        <div style="position: absolute;font-size: 27px;margin-top: -70px;margin-left: -1300px">模式选择</div>
        <div class="content4-item">
          <img src="../assets/image/time.png" alt="" style="width: 150px;height: 150px;margin-left: 23px;">
          <el-popover
            placement="top-start"
            title="低时间模式"
            width="200"
            trigger="hover"
            content="选择此模式，方案将优先考虑时间权重，以最少的时间完成任务。">
            <el-button slot="reference" @click="choose(0)" style="margin-left: 40px;opacity: 0.7;margin-top: 30px"
                       :type="chooseIndex===0?'success':''">
              低时间模式
            </el-button>
          </el-popover>
        </div>
        <div class="content4-item">

          <img src="../assets/image/money.png" alt="" style="width: 150px;height: 150px;margin-left: 23px">
          <el-popover
            placement="top-start"
            title="低成本模式"
            width="200"
            trigger="hover"
            content="选择此模式，方案将优先考虑消耗的成本，以最经济的分配方式完成任务。">
            <el-button slot="reference" @click="choose(1)" style="opacity: 0.7;margin-left: 40px;margin-top: 30px"
                       :type="chooseIndex===1?'success':''">
              低成本模式
            </el-button>
          </el-popover>
        </div>
        <div class="content4-item">

          <div><img src="../assets/image/effe.png" alt="" style="width: 150px;height: 150px;margin-left: 23px"></div>
          <el-popover
            placement="top-start"
            title="高效用模式"
            width="200"
            trigger="hover"
            content="选择此模式，方案将优先考虑人和机器的效用值，以最适合人的机器工作的分配方式完成任务。">
            <el-button slot="reference" @click="choose(2)" style="opacity: 0.7;margin-left: 40px;margin-top: 30px"
                       :type="chooseIndex===2?'success':''">
              高效用模式
            </el-button>
          </el-popover>
        </div>
        <div class="content4-item">

          <div><img src="../assets/image/ziding.png" alt="" style="width: 150px;height: 150px;margin-left: 23px"></div>
          <el-popover
            placement="top-start"
            title="自定义模式"
            width="200"
            trigger="hover"

            content="选择此模式，方案将按照您所设置的权重进行任务分配。">
            <el-button slot="reference" @click="dialogFormVisible1 = true;choose(3)"
                       style="margin-left: 40px;margin-top: 30px;opacity: 0.7;"
                       :type="chooseIndex===3?'success':''"> 自定义模式
            </el-button>
          </el-popover>
        </div>
        <!--      <div>-->
        <!--        <el-button type="text" @click="dialogFormVisible = true">其他</el-button>-->
        <!--      </div>-->


        <el-dialog title="请设置权重：" :visible.sync="dialogFormVisible1">
          <el-form>
            <el-form-item label="时间权重" :label-width="formLabelWidth">
              <el-input v-model="weight_time" placeholder="请输入内容" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="成本权重" :label-width="formLabelWidth">
              <el-input v-model="weight_cost" placeholder="请输入内容" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="效用值权重" :label-width="formLabelWidth">
              <el-input v-model="weight_utility" placeholder="请输入内容" style="width: 80%"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible1 = false">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <div v-show="active===2" style="display: flex;flex-direction: row">
        <div style="width: 80%">
          <div class="content2-title">请选择操作机器人</div>
          <!--      <div class="content2">-->
          <!--        <div">-->
          <!--          <div><img :src="item.img" alt="" style="width: 100px;height: 100px"></div>-->
          <!--        </div>-->
          <!--      </div>-->
          <div class="content2">
            <el-row>
              <div v-for="(item,index) in imgs">
                <el-col :span="4" style="margin-top:30px">
                  <div
                    style="display: flex;flex-direction: column;align-content: center;justify-content:center;justify-items: center;text-align: center">
                    <div
                      style="background-color:#000;height: 150px;width: 150px;  border-radius: 20px;">
                      <el-image :src="item.img" alt=""

                                :class="item.chosen===true?'image-active':'image-deac'"
                                @click="chooseImage(index)"></el-image>
                    </div>
                      <div style="margin-top: 10px;margin-left: -15px">{{ item.name }}</div>


                  </div>

                </el-col>
              </div>
            </el-row>
          </div>

        </div>
        <div
          style="margin-left: 100px;width: 20%;display: flex;flex-direction: column;align-items:center;align-content: center;text-align: center">
          <div style="margin-bottom: 20px;font-size: 30px">已选中的机器人</div>
          <div
            style="display: flex;flex-direction: column;align-content: center;text-align: center;width:150px;
               height: 350px;border-radius: 30px;background-color:gray;">
            <div
              v-for="(item1,i) in imgs">
              <div v-show="item1.chosen===true">
                <el-image :src="item1.img" style="width: 100px;height: 100px;margin-top: 20px;border-radius: 20px">
                </el-image>
                <div style="margin-top: 10px;">
                  {{ item1.name }}
                </div>
              </div>

            </div>
          </div>
        </div>
        <el-dialog title="请选择子任务数量" :visible.sync="dialogVisible" center width="30%">
          <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
            <!--          <el-select v-model="num_task" placeholder="请选择">-->
            <!--            <el-option-->
            <!--              v-for="item in options"-->
            <!--              :key="item"-->
            <!--              :num_task="item" :value="item">-->
            <!--            </el-option>-->
            <!--          </el-select>-->
            <el-input v-model="num_task"></el-input>
            <!--        </div>-->
            <!--        <span slot="footer" class="dialog-footer">-->
            <div style="margin-top: 20px">
              <el-button @click="dialogVisible = false;">取 消</el-button>
              <el-button type="primary" @click="confirmDelete();dialogVisible = false">确定</el-button>
            </div>
          </div>
          <!--      </span>-->
        </el-dialog>
      </div>

      <!--    <div v-show="active===3" class="content5">-->
      <!--      <div>子任务数量</div>-->
      <!--      <el-select v-model="num_task" placeholder="请选择">-->
      <!--        <el-option-->
      <!--          v-for="item in options"-->
      <!--          :key="item"-->
      <!--          :num_task="item" :value="item">-->
      <!--        </el-option>-->
      <!--      </el-select>-->
      <!--    </div>-->
      <div v-show="active===3" class="content3">
        <div class="content2-title">评估结果输入</div>
        <div class="input3">
          <div class="input1">
            <div class="text"></div>
            <div v-for="(item,index) in parseInt(num_task)" style="margin-top: 40px">
              <div>子任务{{ index + 1 }}</div>
            </div>
          </div>
          <div class="input1">
            <div class="text">能力向量</div>
            <div v-for="(item,index) in parseInt(num_task)" style="margin-top: 20px">
              <el-input v-model="capability_array[index]" style="width: 80%"></el-input>
            </div>
          </div>
          <div class="input1">
            <div class="text">机器时间</div>
            <div v-for="(item,index) in parseInt(num_task)" style="margin-top: 20px">
              <el-input v-model="robot_time[index]" style="width: 80%"></el-input>
            </div>

          </div>
          <div class="input1">
            <div class="text">机器效用</div>
            <div v-for="(item,index) in parseInt(num_task)" style="margin-top: 20px">
              <el-input v-model="robot_utility[index]" style="width: 80%"></el-input>
            </div>

          </div>
          <div class="input1">
            <div class="text">机器费用</div>
            <div v-for="(item,index) in parseInt(num_task)" style="margin-top: 20px">
              <el-input v-model="robot_cost[index]" style="width: 80%"></el-input>
            </div>

          </div>
          <div class="input1">
            <div class="text">人类时间</div>
            <div v-for="(item,index) in parseInt(num_task)" style="margin-top: 20px">
              <el-input v-model="human_time[index] " style="width: 80%"></el-input>
            </div>
          </div>
          <div class="input1">
            <div class="text">人类效用</div>
            <div v-for="(item,index) in parseInt(num_task)" style="margin-top: 20px">
              <el-input v-model="human_utility[index]" style="width: 80%"></el-input>
            </div>
          </div>
          <div class="input1">
            <div class="text">人类费用</div>
            <el-input v-model="human_cost" style="width: 80%;margin-top: 20px"></el-input>
          </div>
          <!--        {{capability_array}}-->
          <!--        <el-button @click="commitChild">提交</el-button>-->
        </div>

      </div>
      <div v-show="active===4" class="content6">
        <div class="content2-title">分配结果</div>
        <div
          style="margin-left:10%;width: 80%;display: flex;flex-direction: row;justify-items: center;justify-content: space-around;text-align: center">
          <div v-for="(item,index) in res.allocation">
            <div style="margin-top:30px;">
              <div style="margin-bottom: 20px;font-size: 20px">
                任务{{ index+1 }}
              </div>
              <el-image :src="type[item].images" alt=""
                        style="width: 150px;height: 150px;border-radius: 20px"></el-image>
              <div style="margin-top: 10px">
                {{ type[item].text }}
              </div>
            </div>
          </div>
        </div>
        <div style="width: 100%;display: flex;flex-direction: column;margin-bottom:-10px;align-items: center;justify-content: center;align-content: center;font-size: 25px;color: black;margin-top: 30px">
          <div>总时间：{{ res.total_time }}</div>
          <div>平均效用：{{ res.average_utility }}</div>
          <div>总费用：{{ res.total_payment }}</div>
        </div>

      </div>
      <div class="buttons">
        <div v-show="active!==1">
          <el-button style="margin-top: 70px;" @click="before">上一步</el-button>
        </div>
        <div v-show="active<3">
          <el-button style="margin-top: 70px;margin-left: 10px;margin-right: 10px" @click="next">下一步</el-button>
        </div>
        <div v-show="active===3">
          <el-button style="margin-top: 70px;" @click="commit">提交</el-button>
        </div>
      </div>

    </div>
  </div>

</template>

<script>
import cloud from "vanta/src/vanta.net";
import * as THREE from "three";
import {requestCompute} from "@/network/request";

export default {
  name: "compute",
  data() {
    return {
      dialogVisible: false,
      res: {
        "allocation": [],
        // 0-人，1-机器人1 ，2-机器人2 ，3-人和机器人1，4-人和机器人2，5-机器人1和机器人2

        "average_utility": "",
        "total_payment": "",
        "total_time": ""
      },
      type: [
        {
          "text": "人",
          "images": require("@/assets/image/human.png"),
        },
        {
          "text": "机器人1",
          "images": require("@/assets/image/robot1.png")
        },
        {
          "text": "机器人2",
          "images": require("@/assets/image/robot2.png")
        },
        {
          "text": "人+机器人1",
          "images": require("@/assets/image/human1.png"),
        },
        {
          "text": "人+机器人2",
          "images": require("@/assets/image/human2.png")
        },
        {
          "text": "机器人1+机器人2",
          "images": require("@/assets/image/robots.png")
        },
      ],
      imgs: [
        {img: require('@/assets/image/1.jpg'), name: "KUKA KR 4 AGILUS", chosen: false},
        {img: require('@/assets/image/2.jpg'), name: "KUKA KR 40 PA", chosen: false},
        {img: require('@/assets/image/3.jpg'), name: "KUKA KR 300-2 PA", chosen: false},
        {img: require('@/assets/image/4.jpg'), name: "KUKA KR 360 FORTEC", chosen: false},
        {img: require('@/assets/image/5.jpg'), name: "KUKA KR 470-2 PA", chosen: false},
        {img: require('@/assets/image/6.jpg'), name: "KUKA KR 500 FORTEC", chosen: false},
        {img: require('@/assets/image/7.jpg'), name: "KUKA KR 600  FORTEC", chosen: false},
        {img: require('@/assets/image/8.jpg'), name: "KUKA KR 700 PA", chosen: false},
        {img: require('@/assets/image/9.jpg'), name: "KUKA KR 1000 titan", chosen: false},
        {img: require('@/assets/image/10.jpg'), name: "KUKA KR AGILUS", chosen: false},
        {img: require('@/assets/image/11.jpg'), name: "KUKA KR CYBERTECH", chosen: false},
        {img: require('@/assets/image/12.jpg'), name: "KUKA LBR iiwa", chosen: false},
        {img: require('@/assets/image/13.jpg'), name: "KUKA Quantec nano", chosen: false},
        {img: require('@/assets/image/14.jpg'), name: "STAUBLI TX2touch-60", chosen: false},
        {img: require('@/assets/image/15.jpg'), name: "STAUBLI TX2touch-90", chosen: false},
        {img: require('@/assets/image/16.jpg'), name: "UR3e", chosen: false},
        {img: require('@/assets/image/17.jpg'), name: "UR5e", chosen: false},
        {img: require('@/assets/image/18.jpg'), name: "UR10e", chosen: false},
        // {img: require('@/assets/image/19.jpg'), name: "UR16e",chosen:false},
        // {img: require('@/assets/image/UR20.png'), name: "UR20",chosen:false}
      ],

      chooseIndex: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      active: 1,
      formLabelWidth: '120px',
      chosenList: [],
      chosenNum:0,
      // capability_array_item: "",
      // robot_time_item: "",
      // robot_utility_item: "",
      // robot_cost_item: "",
      // human_time_item: "",
      // human_utility_item: "",
      // human_cost_item: "",

      weight_time: "",
      weight_cost: "",
      weight_utility: "",
      num_task: 1,
      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      capability_array: [],
      robot_time: [],
      robot_utility: [],
      robot_cost: [],
      human_time: [],
      human_utility: [],
      human_cost: "",
      active1: "",
      data: null,
      dialogFormVisible1:false,
      task: 1,
      weights: [
        [0.9, 0.05, 0.05],
        [0.05, 0.9, 0.05],
        [0.05, 0.05, 0.9],
        []
      ]
    }
  },
  methods: {
    chooseImage(e) {
      let imgList = this.imgs
      if(imgList[e].chosen===true){
        imgList[e].chosen = !imgList[e].chosen
        this.chosenNum = this.chosenNum-1
      }else {
        if(this.chosenNum>=2){
          this.$message('已经选择两个！');
        }else{
          imgList[e].chosen = !imgList[e].chosen
          this.chosenNum++
        }

      }
      this.imgs = imgList

      // let list = this.chosenList
      // if (!list.includes(e)) {
      //   list.push(e)
      //   this.chosenList = list
      // } else {
      //   list = this.chosenList
      //   let dex = list.findIndex(item => {
      //     return item === e
      //   })
      //   list.splice(dex, 1)
      //   this.chosenList = list
      // }
      // console.log("处理后", this.chosenList)

    },
    confirmDelete() {
      this.active++
      console.log(this.num_task)
    },
    choose(e) {
      this.chooseIndex = e
      if (e !== 3) {
        this.weight_time = this.weights[e][0]
        this.weight_cost = this.weights[e][1]
        this.weight_utility = this.weights[e][2]
      }

    },
    // commitChild() {
    //   let that = this
    //   that.capability_array = that.capability_array.append(that.capability_array_item)
    //   that.robot_time = that.robot_time.append(that.robot_time_item)
    //   that.robot_utility = that.robot_utility.append(that.robot_utility_item)
    //   that.robot_cost = that.robot_cost.append(that.robot_cost_item)
    //   that.human_time = that.human_time.append(that.human_time_item)
    //   that.human_utility = that.human_utility.append(that.human_utility_item)
    //   that.human_cost = that.human_cost.append(that.human_cost_item)
    //   that.capability_array_item = ""
    //   that.robot_time_item = ""
    //   that.robot_utility_item = ""
    //   that.robot_cost_item = ""
    //   that.human_time_item = ""
    //   that.human_utility_item = ""
    //   that.human_cost_item = ""
    //   that.task += 1
    // },
    next() {
      if (this.chooseIndex !== "") {
        if (this.active === 2) {
          this.dialogVisible = true;//显示弹窗
        } else {
          if (this.active++ > 3) this.active = 1;
        }
      } else {
        this.$message('请先选择模式');
      }


    },
    before() {
      if (this.active-- <= 1) this.active = 1;
    },
    commit() {
      let that = this
      // that.capability_array.forEach((item, index) => {
      //   that.capability_array[index] = parseInt(that.capability_array[index])
      // })
      // that.robot_time.forEach((item, index) => {
      //   that.robot_time[index] = parseInt(that.robot_time[index])
      // })
      // that.robot_utility.forEach((item, index) => {
      //   that.robot_utility[index] = parseInt(that.robot_utility[index])
      // })
      // that.robot_cost.forEach((item, index) => {
      //   that.robot_cost[index] = parseInt(that.robot_cost[index])
      // })
      // that.human_time.forEach((item, index) => {
      //   that.human_time[index] = parseInt(that.human_time[index])
      // })
      // that.human_utility.forEach((item, index) => {
      //   that.human_utility[index] = parseInt(that.human_utility[index])
      // })
      let data = {
        "capability_array": that.capability_array,
        "robot_time": that.robot_time,
        "robot_utility": that.robot_utility,
        "robot_cost": that.robot_cost,
        "human_time": that.human_time,
        "weight_time": that.weight_time,
        "weight_cost": that.weight_cost,
        "weight_utility": that.weight_utility,
        "num_task": that.num_task,
        "human_utility": that.human_utility,
        "human_cost": that.human_cost
      }
      const loading = this.$loading({
        lock: true,
        text: '计算中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      console.log(data)
      requestCompute(data).then(res => {
        console.log(res)
        that.res = res.data
        console.log(res.data)
        that.active++
        loading.close();
        that.$message('计算成功！');
      })
    }
  }
  ,
  mounted() {
    this.vantaEffect = cloud({
      el: this.$refs.vantaRef1,
      THREE: THREE
    })
    this.vantaEffect.setOptions({
      el: "#your-element-selector",
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      color: 0x637f75,
      backgroundColor: 0xc8c8cd,
      points: 4.00,
      maxDistance: 19.00,
      spacing: 14.00
    })
  }
  ,
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }
}
</script>

<style scoped>
.content4 {
  display: flex;
  width: 80%;
  margin-left: 10%;
  justify-content: space-around;
  margin-top: 100px;
  margin-bottom: 20px;
}

.content4-item {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  justify-items: center;
}

.container {
  width: 100%;
  overflow-x: hidden;
  height: 100vh;
}

.input3 {
  width: 60%;
  margin-left: 20%;
  display: flex;

  flex-direction: row;
  justify-content: space-around;
}

/*.content3 {*/
/*  display: flex;*/
/*  flex-direction: row;*/
/*  justify-content: space-around;*/
/*  width: 100%;*/
/*}*/

.buttons {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.input {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 50%;
  margin-left: 25%;
}

.input1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  text-align: center;
  width: 120px;
  margin-top: 20px;
}

.content5 {

}

.content2 {
  width: 100%;
  margin-left: 5%;
}

.content2-title {
  /*position: absolute;*/
  font-size: 27px;
  margin-left: 20px;
  margin-top: 20px;

}

div::-webkit-scrollbar {
  display: none
}

.image-deac {
  width: 150px;
  height: 150px;
  border-radius: 20px;

}

.image-active {
  width: 150px;
  height: 150px;
  border-radius: 20px;
  opacity: 0.6;
  filter: alpha(opacity=60);
}
</style>
